<template>
	<view class="card_pop">
		<titlePop title="优惠券" @close="closeDiscountPop"></titlePop>
		<scroll-view class="discount_box">
			<view class="discount_list" v-for='(i,j) in discountList' :key='i.id'
				@click="couponFlag && discountCkeced(i,j)">
				<image :src="IMGLink + '/shopping/discount.png'" mode="" class="discount_bg">
				</image>
				<view class="discount_con">
					<view class="discount_left">
						<view class="first">
							免保证金
						</view>
						<view>
							免保证金券
						</view>
					</view>
					<view class="discount_right">
						<view class="discount_title">
							新送免保证金券
						</view>
						<view class="discount_date">
							{{i.begin_date}}至{{i.expiration_date}}
						</view>
						<view class="discount_area">
							{{i.scope_title}}({{i.appoint_title}})
							<!-- 指定专区可用（免保证金专区） -->
						</view>
					</view>
				</view>
				<image :src="IMGLink + '/shopping/discountchecked.png'" v-if='couponFlag'
					:style="i.active?'':'display:none'" mode="" class="discount_check"></image>
				<image :src="IMGLink + '/shopping/discountnocheck.png'" v-if='couponFlag'
					:style="i.active?'display:none':''" mode="" class="discount_check"></image>
			</view>
			<view class="no_data" v-if='discountList.length == 0'>
				暂无优惠券
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import titlePop from './titlepop.vue';
	export default {
		props: ['coupon', 'list'],
		data() {
			return {
				IMGLink: this.IMGLink,
				discountList: [],
				couponFlag: true
			}
		},
		watch: {
			coupon(news, old) {
				this.couponFlag = news;
			},
			list(news) {
				this.discountList = news;
			}
		},
		mounted() {
			this.couponFlag = this.coupon;
			if(this.list.length > 0){
				this.discountList = this.list;
			}
		},
		components: {
			titlePop,
		},
		methods: {
			closeDiscountPop() {
				this.$emit('closeDiscountPop')
			},
			discountCkeced(i, j) {
				for (let n of this.discountList) {
					n.active = false;
				}
				this.discountList[j].active = true;
				this.$emit('changecouponId', i.id);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './css/discount.scss';
</style>
